<template>
<div class="table_tem">
    <div  class="g_box" v-for="(item,index) in list" :key="index">
		<div class="g_head">
			<h3>{{item.name}}</h3>
		</div>
		<div class="g_box_con">
			<Table :columns="Columns" :data="item.list" :border="true"></Table>
		</div>
    </div>

</div>
</template>

<script>
import expandRow from './table-expand.vue';

//添加元素到指定位置
Array.prototype.add = function (val, index) {
  if (index > - 1) {
    this.splice(index, 0, val);
  }
};

export default {
  name: "table_item",
  components: { expandRow },
  data() {
    return {
		Columns:[],
		list:[]
    };
  },
  props: ["cinfo"],
  created(){
	this.init();
  },
  watch:{
	cinfo:{
		handler(val){
			this.init();
		},
		deep:true
	}
  },
  methods: {
	init(){
		var self = this;
		if(!this.cinfo.columns){
			return;
		}
		
		this.list = [];
		for(var i=0;i<this.cinfo.data.length;i++){
			var ls_arr = this.cinfo.data[i];
			for(var j=0;j<ls_arr.list.length;j++){
				ls_arr.list[j].pid = i;
			}
			this.list.push(ls_arr);
		}
		
		var columns = this.cinfo.columns;
		
		
		var ls_colnmns = [];
		
		var ll = {
			key:'name',
			title:'',
			
			render:(h,params)=>{
				if(!params.row.childs){
					if(params.row.is_child){
						return h('div',{
							style:{
								color:'#3399FF'
							}
						},params.row.code+params.row.name);
					}
					else{
						return h('div',(params.row.code?params.row.code:'')+params.row.name);
					}
					
				}
				
				var is_open = params.row.is_open;

				return h('div',{
					style:{
						//color:'#3399FF'
					},
					on:{
						click(e){
							
							self.list[params.row.pid].list[params.index].is_open = is_open?0:1;
							
							if(params.row.is_open){ //展开
								var list = self.list[params.row.pid].list;
								var code = params.row.code;
								var ls_arr = [];
								for(var i=0;i<list.length;i++){
									
									if(!(list[i].code && list[i].code!=code && list[i].code.indexOf(code)!=-1)){
										
										ls_arr.push(list[i]);
									}
								}
								
								self.list[params.row.pid].list = ls_arr;
							}
							else{ //收缩
								var ls_list = params.row.childs.list;
								
								var list = self._getData(self.list[params.row.pid].list);
								
								for(var i=0;i<ls_list.length;i++){
									ls_list[i].is_child = 1;
									list.add(ls_list[i],params.index);
								}
								
								self.list[params.row.pid].list = list;
								
								
								
							}
							
							
							console.log(is_open);
						}
					}
				},[
					h('Icon',{
						props:{
							type: is_open?'ios-arrow-up':'ios-arrow-down'
						},
						style:{
							display:'block',
							textAlign:'center'
						}
					}),
					h('div',params.row.code + params.row.name)
					
				]);
			}
		};
		
		for(var i=0;i<columns.length;i++){
			var ls_data = {
				key:columns[i].key,
				title:columns[i].title,
				width:70,
				align:'center'
			};
			
			if(columns[i].width){
				ls_data['width'] = columns[i].width;
			}
			
			if(columns[i].key=='name'){
				ls_data = ll;
				ls_data.title = columns[i].title;
			}
			
			ls_colnmns.push(ls_data);
		}

		
		this.Columns = ls_colnmns;
		
	}
  }
};
</script>
<style scoped>
.fw-col{
  color:blue;
}
</style>